<template>
  <a-form>
    <a-row :gutter="24" v-if="area == 'basic'">

      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="联系人">
          <a-input v-model="queryParam.linkMan" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="联系电话">
          <a-input v-model="queryParam.linkManTel" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="合同状态">
          <a-select allowClear v-model="queryParam.contractState">
            <a-select-option v-for="(item, index) in statusList" :key="item.ID" :value="item.ID">{{ item.Title
              }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="小区">
          <a-input v-model="queryParam.ResidentialAreaName" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="楼栋名">
          <a-input v-model="queryParam.BuildingName" allowClear />

        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="房间">
          <a-input v-model="queryParam.RoomName" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout1" label="合同开始时间">
          <a-range-picker :ranges="{
            一周内: [moment(), moment().endOf('week')],
            一月内: [moment(), moment().endOf('month')],
            一年内: [moment(), moment().endOf('year')],
          }" style="width: 100%" format="YYYY-MM-DD" @change="dateChange" />
        </a-form-item>
      </a-col>

      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout1" label="合同结束时间">
          <a-range-picker :ranges="{
            一周内: [moment(), moment().endOf('week')],
            一月内: [moment(), moment().endOf('month')],
            一年内: [moment(), moment().endOf('year')],
          }" style="width: 100%" format="YYYY-MM-DD" @change="dateChange1" />
        </a-form-item>
      </a-col>

    </a-row>
    <a-row :gutter="24" v-if="area == 'electricity' || area == 'water'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="年份">
          <a-input v-model="queryParam.year" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="月份">
          <a-input v-model="queryParam.month" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="小区">
          <a-input v-model="queryParam.ResidentialAreaName" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="楼幢号">
          <a-input v-model="queryParam.buildingNo" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="楼层">
          <a-input v-model="queryParam.floor" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="合同编号">
          <a-input v-model="queryParam.ContractNo" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="承租人">
          <a-input v-model="queryParam.LinkMan" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="是否审核">
          <a-select allowClear v-model="queryParam.IsAudit">
            <a-select-option :value="null">全部</a-select-option>
            <a-select-option :value="true">是</a-select-option>
            <a-select-option :value="false">否</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="支付情况">
          <a-select allowClear v-model="queryParam.IsPay">
            <a-select-option :value="null">全部</a-select-option>
            <a-select-option :value="true">是</a-select-option>
            <a-select-option :value="false">否</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="支付时间">
          <a-range-picker :ranges="{
            一周内: [moment(), moment().endOf('week')],
            一月内: [moment(), moment().endOf('month')],
            一年内: [moment(), moment().endOf('year')],
          }" style="width: 100%" format="YYYY-MM-DD" @change="dateChange3" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="支付方式">
          <a-select allowClear v-model="queryParam.PayWay">
            <a-select-option :value=0 >全部</a-select-option>
            <a-select-option :value=1 >小程序线上支付</a-select-option>
            <a-select-option :value=2 >其它</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

    </a-row>
    <a-row :gutter="24" v-if="area == 'rent'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="合同编号">
          <a-input v-model="queryParam.ContractNo" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="承租人">
          <a-input v-model="queryParam.LinkMan" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="支付情况">
          <a-select allowClear v-model="queryParam.IsPay">
            <a-select-option :value="null">全部</a-select-option>
            <a-select-option :value="true">是</a-select-option>
            <a-select-option :value="false">否</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="是否审核">
          <a-select allowClear v-model="queryParam.IsAudit">
            <a-select-option :value="null">全部</a-select-option>
            <a-select-option :value="true">是</a-select-option>
            <a-select-option :value="false">否</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="年份">
          <a-input v-model="queryParam.year" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="支付时间">
          <a-range-picker :ranges="{
            一周内: [moment(), moment().endOf('week')],
            一月内: [moment(), moment().endOf('month')],
            一年内: [moment(), moment().endOf('year')],
          }" style="width: 100%" format="YYYY-MM-DD" @change="dateChange3" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="支付方式">
          <a-select allowClear v-model="queryParam.PayWay">
            <a-select-option :value=0 >全部</a-select-option>
            <a-select-option :value=1 >小程序线上支付</a-select-option>
            <a-select-option :value=2 >其它</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

    </a-row>

    <a-row :gutter="24" v-if="area == 'meter'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="表类型">
          <a-select showSearch optionFilterProp="children" v-model="queryParam.MeterType">
            <a-select-option :value=1>水表</a-select-option>
            <a-select-option :value=2>电表</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="抄表人">
          <a-select showSearch optionFilterProp="children" v-model="queryParam.meterUser">
              <a-select-option v-for="(item, index) in meterUserList" :key="item.value" :value="item.value">{{
        item.label }}</a-select-option>
            </a-select>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="24" v-if="area == 'repair'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="报修时间">
          <a-range-picker :ranges="{
            一周内: [moment(), moment().endOf('week')],
            一月内: [moment(), moment().endOf('month')],
            一年内: [moment(), moment().endOf('year')],
          }" style="width: 100%" format="YYYY-MM-DD" @change="dateChange2" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="area == 'situation'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="租户类型">
          <a-select showSearch optionFilterProp="children" v-model="queryParam.tenantType">
            <a-select-option v-for="(item, index) in tenantTypeList" :key="item.value" :value="item.value">{{
        item.label }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="联系人">
          <a-input v-model="queryParam.linkMan" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="联系电话">
          <a-input v-model="queryParam.linkManTel" allowClear />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <a-form-item :style="{ float: 'right' }">
          <a-button type="primary" style="margin-left: 14px" @click="onSearch(queryParam)">查询</a-button>
          <a-button @click="add" style="margin-left: 14px" v-if="addType == 1">添加</a-button>
          <!-- <a-button v-if="displayf != 'choose'" style="margin-left: 14px;" @click="importExcel(queryParam)">导入</a-button> -->
          <a-button v-if="area == 'electricity' || area == 'water' || area == 'rent'" style="margin-left: 14px" @click="exportExcel(queryParam)">导出</a-button>
          <a-popconfirm v-if="area != 'situation' && area !='meter'" @confirm="deleted" placement="left" title="确定删除?" okText="确定" cancelText="取消">
            <a-button type="danger" style="margin-left: 14px">删除</a-button>
          </a-popconfirm>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { authDevice } from "@/utils/mixin";
import { personList, visitType } from "@/utils/device";
import moment from "moment";
import Treeselect from "@riophae/vue-treeselect";

import {
  getUnitPriceList,
  getModalUserList,
} from "@/api/allApi";
import { getDicList, getDicDropList } from "@/api/dict";

import { mapActions, mapGetters } from "vuex";
import { deleteChildrenIfNull } from "@/utils/util";

const userInfo = Vue.ls.get(ACCESS_TOKEN);
export default {
  name: "SearchFom",
  mixins: [authDevice],
  components: { Treeselect },
  props: {
    area: {
      type: String,
      required: false,
    },
    baseType: {
      type: String,
      required: false,
    },
    displayf: {
      type: String,
      required: false,
    },
    dataObj: {
      type: Object,
      required: false,
    },
    addType: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      a: process.env.VUE_APP_API_BASE_URL + "/api/students/ImportExcel",
      normalizer (node) {
        return {
          id: node.ID,
          label: node.Title,
          children: node.Childrens,
        };
      },
      fileList: [],
      tenantTypeList: [],
      meterUserList: [],
      userInfo,
      more: true,
      open: false,
      statusList: [
        {
          ID: 0,
          Title: "终止"
        },
        {
          ID: 1,
          Title: "正常"
        }
      ],
      ReplyList: [{
        ID: 0,
        Title: "全部"
      }, {
        ID: 1,
        Title: "已回复"
      }, {
        ID: 2,
        Title: "未回复"
      }
      ],
      roomsList: [],
      personList: personList,
      visitTypeList: visitType,
      helpTypeList: [],
      notificationTypeList: [],
      queryParam: {
        ResidentialAreaName: undefined,
        BuildingName: undefined,
        RoomName: undefined,
        RoomIDs: undefined,
        ContractNo: undefined,
        MeterType: 1,
        meterUser:undefined,
        linkMan: undefined,
        linkManTel: undefined,
        contractState: undefined,
        startTimeStart: undefined,
        startTimeEnd: undefined,
        endTimeStart: undefined,
        endTimeEnd: undefined,
        tenantType: undefined,
        year: undefined,
        IsPay: undefined,
        month: undefined,
        IsAudit: undefined,
        isReading: undefined,
        buildingNo: undefined,
        floor: undefined,
        PayTimeStart: undefined,
        PayTimeEnd: undefined,
        isHandle: undefined,
        RepairTimeStart: undefined,
        RepairTimeEnd: undefined,
        consultationClassificationIDs: undefined,
        classificationID: undefined,
        replyState: undefined,
        startDate: undefined,
        endDate: undefined,
        PayWay: 0,

      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 19 },
        },
      },
      normalizer (node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
    };
  },
  watch: {
    queryParam () {
      this.onSearch(this.queryParam);
    },

  },
  computed: {},
  async created () {

    // this.typeList = data;
    getUnitPriceList().then((res) => {
      console.log(res)
      this.tenantTypeList = res.data.map((el) => {
        return { value: el.id, label: el.unitPriceName };
      });
    });

    getModalUserList({ index: 1, pageSize:50, roleID: 54 }).then(res => {
      console.log(res)
      this.meterUserList = res.data.map(item => {
        return {
          label: item.TrueName,
          value: item.id,
        }
      })
    })
  },
  async mounted () { },
  computed: {},
  methods: {
    moment,
    resetForm () {
      this.queryParam = {
        ResidentialAreaName: undefined,
        BuildingName: undefined,
        RoomName: undefined,
        RoomIDs: undefined,
        linkMan: undefined,
        ContractNo: undefined,
        linkManTel: undefined,
        contractState: undefined,
        startTimeStart: undefined,
        startTimeEnd: undefined,
        endTimeStart: undefined,
        endTimeEnd: undefined,
        MeterType: 1,
        meterUser:undefined,
        PayWay:0,

        year: undefined,
        IsPay: undefined,
        month: undefined,
        IsAudit: undefined,
        isReading: undefined,
        buildingNo: undefined,
        tenantType: undefined,
        floor: undefined,
        PayTimeStart: undefined,
        PayTimeEnd: undefined,
        isHandle: undefined,
        RepairTimeStart: undefined,
        RepairTimeEnd: undefined,
        consultationClassificationIDs: undefined,
        classificationID: undefined,
        replyState: undefined,
        startDate: undefined,
        endDate: undefined,
      };
    },
    onSearch (data) {
      const objData = { ...data };
      this.$emit("search", objData);
    },

    // handleSearch (e) {
    //   console.log(e.target.value)
    //   if (e.target.value.length > 3) {
    //     getRoomList({
    //       index: 1,
    //       pageSize: 9999,

    //     }).then((res) => {
    //       this.roomsList = res.data.map(el => {
    //         return {
    //           ID: el.id,
    //           Title: el.roomName,
    //         };
    //       })
    //     });
    //   }
    // },
    dateChange (dates, dateStrings) {
      this.queryParam.startTimeStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.startTimeEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },
    dateChange1 (dates, dateStrings) {
      this.queryParam.endTimeStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.endTimeEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },
    dateChange2 (dates, dateStrings) {
      this.queryParam.RepairTimeStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.RepairTimeEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },
    dateChange3 (dates, dateStrings) {
      this.queryParam.PayTimeStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.PayTimeEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },
    deleted () {
      this.$emit("handleDel");
    },
    add () {
      this.$emit("handleAdd");
    },

    exportExcel (obj) {

      this.$emit('exportXls', obj)
    },

  },
};
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
